<script setup lang="ts">
import { ref, onMounted } from 'vue'
import NavBottom from '../../components/nav.vue'
import {useRouter} from 'vue-router'
import {get} from '@/api/api'
import {removeToken} from '@/api/auth'

const router = useRouter()

const userObj = ref({})

onMounted(async () => {
    const res:any = await get('/c/user/info');
    userObj.value = res.data?.data
})
const exit = () => {
    removeToken()
    router.push('/login')
}
</script>

<template>

  <div class="my">
    <div class="my-top">
        <img src="../../assets/logo.png" alt="">
        <div class="my-top-right">
            <div class="my-item">{{userObj.nickname || '用户昵称'}}</div>
            <div class="my-item1">{{userObj.phoneNumber}}</div>
        </div>
    </div>
    <div class="my-search">
        <div class="my-search-item" @click="$router.push('/my_count')">
            <div class="flex_center"><el-icon class="mr10"><Search /></el-icon>查询次数</div>
            <div class="flex_center gray">剩余{{userObj.lastNum||0}}次<el-icon><ArrowRight /></el-icon></div>
        </div>
        <div class="my-search-item" @click="$router.push('/my_record')">
            <div class="flex_center"><el-icon class="mr10"><Document /></el-icon>查询记录</div>
            <div class="flex_center gray">{{userObj.queryRecordNum||0}}条<el-icon><ArrowRight /></el-icon></div>
        </div>
    </div>
    <div class="my-search">
        <div class="my-search-item" @click="$router.push('/mineInfo')">
            <div class="flex_center"><el-icon class="mr10"><Tickets /></el-icon>个人信息</div>
            <div class="flex_center gray"><el-icon><ArrowRight /></el-icon></div>
        </div>
        <div class="my-search-item" @click="$router.push('/contactUs')">
            <div class="flex_center"><el-icon class="mr10"><Headset /></el-icon>联系我们</div>
            <div class="flex_center gray"><el-icon><ArrowRight /></el-icon></div>
        </div>
    </div>
    <div class="exit" @click="exit"><span>退出登录</span></div>
    <NavBottom />
  </div>
</template>

<style scoped>
.my{
    background-color: #f6f6f6;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}
.my-top{
    height: 120px;
    display: flex;
    background: url('../../assets/my-bg.png');
}
.my-top img {
    width: 50px;
    height: 50px;
    display: inline-block;
    padding-top: 40px;
    padding-left: 16px;
}
.my-item{
    padding-top: 45px;
    padding-left: 16px;
}
.my-item1{
    padding-left: 14px;
    font-size: 14px;
    color: #999;
}
.my-search{
    background: #fff;
    border-radius: 12px;
    margin: 0 16px;
    margin-top: 20px;
    padding: 0 20px;
}
.my-search-item{
    display: flex;
    justify-content: space-between;
    padding: 18px 0;
}
.my-search-item:first-child{
    border-bottom: 1px solid #eee;
}
.exit {
    margin: 0 16px;
    background-color: #fff;
    margin-top: 16px;
    height: 50px;
    line-height: 50px;
    border-radius: 6px;
    text-align: center;
    color: #f00;
}
.flex_center{
    display: flex;
    align-items: center;
}
.flex_center .el-icon{
    font-size: 16px;
}
.mr10{
    margin-right: 6px;
}
.gray{
    color: #999;
}
</style>
